Add BYOC and Cloud platform badges for ADP documentation#376
Open
JakeSCahill wants to merge 66 commits into
Open
Add BYOC and Cloud platform badges for ADP documentation#376JakeSCahill wants to merge 66 commits into
JakeSCahill wants to merge 66 commits into
Conversation
- Add badge--byoc CSS class with blue styling for BYOC-only features - Add badge--cloud CSS class with purple styling for Cloud features - Define CSS variables for badge colors and backgrounds Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add availability block showing Cloud/BYOC support on ADP pages - Add info icon with Tippy.js tooltip explaining availability - Add BYOC and Cloud badge CSS variables for light/dark modes - Update article.hbs to render availability block for ADP pages - Minor fixes to header, nav, and TOC styling Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThis PR makes large coordinated changes across styling, templates, helpers, and client scripts: it introduces new landing-page styles and nav/topbar redesign, adds BYOC/Cloud badges and availability UI, refactors doc styling and code/listing presentation, enhances Bloblang tooling and playground UX, replaces Kapa modal triggers with a chat-panel API, adds a persistent chat drawer script and React chat mounting updates, and includes multiple helper utilities and build adjustments. Sequence Diagram(s)sequenceDiagram
participant User
participant Page as Page script / partials
participant Drawer as Chat panel (chat-panel.js + React)
participant ChatSvc as Chat backend / Kapa SDK
User->>Page: Click "Ask AI" or submit ask form
Page->>Page: Build aiPromptText from context (selection, snippet, page metadata)
Page->>Drawer: call window.openChatWithQuery(aiPromptText, true)
Drawer->>Drawer: open panel, focus textarea (restore persisted state)
Drawer->>ChatSvc: submit query (autoSubmit=true)
ChatSvc-->>Drawer: returns AI response
Drawer-->>User: render response (toasts, messages)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests (beta)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
src/css/doc.css (1)
1012-1018: Add the same fallback for the info icon color.Line 1017 uses
--availability-block-borderwithout the fallback used on Line 993, so the icon color can become invalid if a theme omits that variable.🎨 Proposed fallback
.doc .availability-block .availability-info { display: inline-flex; align-items: center; margin-left: 0.5rem; cursor: help; - color: var(--availability-block-border); + color: var(--availability-block-border, var(--note-border-color)); vertical-align: middle; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/css/doc.css` around lines 1012 - 1018, The color declaration inside the .doc .availability-block .availability-info rule uses var(--availability-block-border) without a fallback; update the color property to use the same fallback pattern as earlier (e.g. var(--availability-block-border, var(--availability-border))) so the info icon color remains valid when --availability-block-border is not defined. Locate the .doc .availability-block .availability-info selector and replace the color value to include the fallback variable.src/partials/article.hbs (1)
80-96: Consider attribute-driving the tooltip content and consolidating the init script.Two small consistency nits for this new inline block:
- The tooltip copy is hardcoded in the template, whereas the existing BYOC/Cloud/beta/limited-availability tooltips read from page attributes (e.g.,
page.attributes.byoc-textat Line 170,page.attributes.cloud-only-textat Line 196). Using something likepage.attributes.availability-textwith a sensible default keeps content editable without a UI rebuild and matches the pattern already established in this file.- Initialization is split across two
DOMContentLoadedhandlers (here and the one starting at Line 103). Folding this tippy init into the existing handler reduces duplicate listeners and keeps all tooltip setup in one place. Note that the existing handler bails early at Line 107–109 if.metadata--main/.metadata--navare missing, so if you consolidate, initialize the availability-info tooltip before that early return (or adjust the guard) so ADP pages still get it.Both are optional; leaving as-is is functional.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/partials/article.hbs` around lines 80 - 96, Replace the hardcoded tooltip text and separate listener by reading content from page.attributes.availability-text (with the current hardcoded string as a sensible default) when creating the tooltip for the element selected as availabilityInfo, and move the tippy initialization into the existing DOMContentLoaded handler that already sets up other tooltips; ensure you reference availabilityInfo and call tippy(...) with the same options but initialize it before the early return that checks for .metadata--main/.metadata--nav (or adjust that guard) so ADP pages still get the availability tooltip.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/css/header.css`:
- Around line 153-155: The desktop override for right-side nav items still uses
var(--navbar-font-color) so custom header text colors from --nav-text-color
aren't applied; update the selector .navbar-end > .navbar-item and .navbar-end
.navbar-link to use color: var(--nav-text-color, var(--navbar-menu-font-color))
(matching the other .navbar-item/.navbar-link rule) so desktop right-side nav
items inherit the custom header text color.
In `@src/css/vars.css`:
- Around line 185-195: Override the badge label text color variables in the
dark-theme block so the bright BYOC/Cloud backgrounds keep good contrast:
add/override --byoc-label-color and --cloud-label-color inside
html[data-theme=dark] (matching the existing --byoc-label-background and
--cloud-label-background variables) and set them to a dark, high-contrast color
instead of inheriting `#fff`; update any usages of these badges that read the
label color variable (e.g., the BYOC/Cloud badge styles that reference
--byoc-label-color / --cloud-label-color) to ensure the new variables are
applied.
In `@src/partials/article.hbs`:
- Around line 55-71: The availability block (class "availability-block" in
article.hbs) fails to render any platform when both page.attributes.byoc and
page.attributes.cloud-only are true; change the conditional logic to explicitly
handle all four states (both true, only byoc, only cloud-only, neither) so the
both-true case emits a sensible label (e.g., "Cloud, BYOC"); implement this by
replacing the nested if/unless chain with an explicit sequence: if both
page.attributes.byoc and page.attributes.cloud-only => "Cloud, BYOC", else if
page.attributes.byoc => "BYOC", else if page.attributes.cloud-only => "Cloud",
else => "Cloud, BYOC" (or equivalent join of computed platforms) so the
availability-block always shows a value.
In `@src/partials/header-content.hbs`:
- Line 18: The anchor element rendering the navbar item currently injects an
inline style for non-standalone pages (using
`@root.page.component.latest.asciidoc.attributes.page-header-data.text-color`),
which overrides stylesheet hover/current states; update the template so the
inline style is only applied for standalone widgets (keep the existing
`@root.isStandaloneWidget` branch that sets style="color: white;") and remove the
else-if branch that sets color from page-header-data.text-color, relying on the
existing --nav-text-color set elsewhere to control non-standalone link color and
hover/is-current states; locate the anchor with class "navbar-item {{`#if` (eq
this.title `@root.page.component.title`)}}is-current{{/if}}" and remove the
non-standalone inline color injection.
In `@src/partials/nav-tree.hbs`:
- Line 8: Add two new helpers is-byoc-feature.js and is-cloud-feature.js in
src/helpers modeled after is-beta-feature.js and is-enterprise.js that use
contentCatalog to look up the target page by URL and return true when target
page attributes include page-byoc and page-cloud-only respectively; then update
the ADP guard logic used in nav-tree.hbs so it checks the target nav item's
attributes (via the same helper/lookup) rather than `@root.page.attributes.adp`,
ensuring BYOC/Cloud badge classes are suppressed only when the target page is an
ADP page.
---
Nitpick comments:
In `@src/css/doc.css`:
- Around line 1012-1018: The color declaration inside the .doc
.availability-block .availability-info rule uses
var(--availability-block-border) without a fallback; update the color property
to use the same fallback pattern as earlier (e.g.
var(--availability-block-border, var(--availability-border))) so the info icon
color remains valid when --availability-block-border is not defined. Locate the
.doc .availability-block .availability-info selector and replace the color value
to include the fallback variable.
In `@src/partials/article.hbs`:
- Around line 80-96: Replace the hardcoded tooltip text and separate listener by
reading content from page.attributes.availability-text (with the current
hardcoded string as a sensible default) when creating the tooltip for the
element selected as availabilityInfo, and move the tippy initialization into the
existing DOMContentLoaded handler that already sets up other tooltips; ensure
you reference availabilityInfo and call tippy(...) with the same options but
initialize it before the early return that checks for
.metadata--main/.metadata--nav (or adjust that guard) so ADP pages still get the
availability tooltip.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2920838c-1e2e-46cf-b4e4-3cf4e6cf2378
📒 Files selected for processing (10)
src/css/doc.csssrc/css/header.csssrc/css/metadata.csssrc/css/nav.csssrc/css/vars.csssrc/js/vendor/prism/prism-bloblang.jssrc/partials/article.hbssrc/partials/header-content.hbssrc/partials/nav-tree.hbssrc/partials/toc.hbs
This was referenced Apr 23, 2026
- Add is-byoc-feature.js helper to detect page-byoc attribute - Add is-cloud-feature.js helper to detect page-cloud-only attribute - These helpers enable nav badge display for ADP documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix header.css: Use --nav-text-color for navbar-end items - Fix vars.css: Add dark mode label color overrides for BYOC/Cloud badges - Fix article.hbs: Handle case when both byoc and cloud-only attributes are true - Fix header-content.hbs: Remove inline color that overrides CSS hover states - Fix doc.css: Add fallback for availability info icon color Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
ADP Cloud is descoped from the 2026-06-15 GA. With BYOC as the only deployment shape, the "Available in: Cloud, BYOC" / "Available in: BYOC" admonition no longer informs the reader and adds visual noise on every ADP page. Drop the entire `page.attributes.adp` availability block from src/partials/article.hbs. Other badges (beta, limited-availability, context-switcher, BYOC/Cloud labels for non-ADP pages) keep working unchanged. Companion PR: redpanda-data/adp-docs#13 ships the same change locally via Antora's supplemental_files mechanism so the deploy preview is fixed immediately. Once a new docs-ui release tag is cut from this branch and the adp-docs / docs-site playbooks are bumped to it, the supplemental override in adp-docs becomes redundant and can be deleted. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ature/badge-byoc-only
JakeSCahill
force-pushed
the
feature/badge-byoc-only
branch
from
699c046 to
2a4cff4
Compare
Adds inline status badges in the sticky header for ADP pages when features are limited to specific platforms: - "Only in BYOC" badge when :page-byoc-only: true is set - "Only in Cloud" badge when :page-cloud-only: true is set Both attributes require :adp: true (set in ADP component antora.yml). Badges are mutually exclusive - set only one. Also includes: - Version dropdown alignment fix (aligns left with button) - Removed the availability block in favor of compact inline badges
JakeSCahill
force-pushed
the
feature/badge-byoc-only
branch
from
2a4cff4 to
30917d0
Compare
JakeSCahill
changed the title
This was referenced May 7, 2026
Contributor
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 12
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/partials/nav-explore.hbs (1)
16-33:⚠️ Potential issue | 🟠 Major | ⚡ Quick winThe default-version path renders an empty dropdown.
When the current version is
'default'andpage.versions.length > 1, line 6 still makes this a dropdown, but lines 19-32 skip rendering every option. That leaves a visible chevron with an empty menu. Remove that inner guard or render the default-version alternatives there as well.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/partials/nav-explore.hbs` around lines 16 - 33, The dropdown shows a chevron but no items because the inner guard "{{`#if` (ne page.componentVersion.displayVersion 'default')}}" prevents rendering when the current displayVersion is 'default'; remove that guard (or change the logic to always iterate page.versions) so the template always runs the "{{`#each` page.versions}}" block and emits version links (still skipping the current version via "{{`#if` (ne ./version `@root.page.version`)}}" and using "{{`#with` (resolve-resource ./url) as |targetPage|}}", the "{{{relativize ../url}}}" href, and the existing "{{../displayVersion}}"/"{{`#if` (is-eol ../asciidoc.attributes)}}" handling).src/partials/article.hbs (1)
95-220:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winCritical: undefined
metadataContainerbreaks all tooltip/observer setup.
metadataContaineris used on Line 154, Line 180, and Line 219 but never defined. This will throw at runtime and abort the entireDOMContentLoadedhandler. Also,navMetadataContainer.querySelector(...)is called without guarding null.💡 Suggested fix
document.addEventListener("DOMContentLoaded", () => { const stickyHeader = document.querySelector(".component-indicator-sticky"); + const metadataContainer = document.querySelector(".metadata--main"); const navMetadataContainer = document.querySelector(".metadata--nav"); @@ - const topByocBadge = metadataContainer.querySelector(".byoc-label p"); - const navByocBadge = navMetadataContainer.querySelector(".nav-byoc-label"); + const topByocBadge = metadataContainer?.querySelector(".byoc-label p"); + const navByocBadge = navMetadataContainer?.querySelector(".nav-byoc-label"); @@ - const topCloudBadge = metadataContainer.querySelector(".cloud-label p"); - const navCloudBadge = navMetadataContainer.querySelector(".nav-cloud-label"); + const topCloudBadge = metadataContainer?.querySelector(".cloud-label p"); + const navCloudBadge = navMetadataContainer?.querySelector(".nav-cloud-label"); @@ - observer.observe(metadataContainer); + if (metadataContainer && navMetadataContainer) { + observer.observe(metadataContainer); + } });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/partials/article.hbs` around lines 95 - 220, The handler uses an undefined metadataContainer and calls querySelector on navMetadataContainer without null checks, causing runtime failures; define and assign metadataContainer at the top of the DOMContentLoaded block (e.g., const metadataContainer = document.querySelector(".metadata") or the actual selector used elsewhere), guard uses of navMetadataContainer (and metadataContainer) before calling .querySelector or accessing properties (wrap tippy initializations for topByocBadge/topCloudBadge and nav*Badge initializations in if (metadataContainer) / if (navMetadataContainer) checks), and only call observer.observe(metadataContainer) when metadataContainer is non-null to avoid errors. Ensure you update references to topByocBadge/topCloudBadge to query from metadataContainer only after that null check.
🧹 Nitpick comments (1)
src/partials/head-scripts.hbs (1)
117-128: 💤 Low valueConsider extracting theme toggle logic to reduce duplication.
The sidebar theme toggle handler (lines 118-128) duplicates the logic from the main theme toggle handler (lines 71-77). Both handlers toggle between light and dark themes, update localStorage, and call
setTheme.♻️ Optional refactor to share toggle logic
+ function toggleTheme() { + const currentTheme = document.documentElement.getAttribute('data-theme') || 'light'; + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + localStorage.setItem('theme', newTheme); + setTheme(newTheme); + } + window.addEventListener('DOMContentLoaded', function() { const switchButton = document.getElementById('switch-theme'); // ... existing code ... if (switchButton) { setTheme(initialTheme); // Apply initial theme on load switchButton.addEventListener('click', function() { - // Toggle theme on button click - const currentTheme = document.body.getAttribute('data-theme'); - const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; - localStorage.setItem('theme', newTheme); - setTheme(newTheme); + toggleTheme(); }); } // ... existing code ... }); // Connect sidebar theme toggle to main theme switcher window.addEventListener('DOMContentLoaded', function() { const sidebarThemeToggle = document.getElementById('sidebar-theme-toggle'); if (sidebarThemeToggle) { - sidebarThemeToggle.addEventListener('click', function() { - const currentTheme = document.documentElement.getAttribute('data-theme') || 'light'; - const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; - localStorage.setItem('theme', newTheme); - setTheme(newTheme); - }); + sidebarThemeToggle.addEventListener('click', toggleTheme); } });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/partials/head-scripts.hbs` around lines 117 - 128, Extract the duplicated toggle logic into a reusable function (e.g., toggleTheme) and call it from both the sidebar handler and the main theme handler: move the code that reads data-theme from document.documentElement, computes newTheme, sets localStorage('theme'), and calls setTheme into a single function (referencing setTheme and the new toggleTheme helper), then replace the inline click callbacks on the sidebarThemeToggle element and the main theme toggle element to just call toggleTheme; keep the DOMContentLoaded listener but update it to attach the click handlers to their elements (sidebar-theme-toggle and the main toggle) which both invoke toggleTheme.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/css/bloblang-playground.css`:
- Around line 1203-1209: The CSS rule .bloblang-playground .validation-error
uses the deprecated property value `word-break: break-word`; remove that
declaration and replace it with the modern wrapping rule `overflow-wrap:
anywhere` (keeping existing properties like `white-space: normal` and
`word-break` entirely removed) so lint no longer flags it and text still wraps
correctly. Ensure you update the .bloblang-playground .validation-error block to
drop `word-break: break-word` and add `overflow-wrap: anywhere`.
In `@src/css/header.css`:
- Around line 209-213: Rename the keyframe identifier bcDropdownIn to a
kebab-case name (e.g., bc-dropdown-in) wherever it appears: update the
`@keyframes` rule name and all references to it (for example the animation
property that currently uses bcDropdownIn) to match the kebab-case name so
linting passes; ensure both the declaration (`@keyframes` bc-dropdown-in { ... })
and uses (animation: bc-dropdown-in 0.15s ease-out;) are updated consistently.
In `@src/css/home.css`:
- Around line 394-400: The CSS has stylelint failures: the keyframe name casing
(toastSlideIn) and keyword case in color-mix usage (in sRGB). Rename the
keyframes to follow the configured pattern (e.g., toast-slide-in or other
project keyframes convention) wherever referenced (look for toastSlideIn usage
in `@keyframes` and animation names) and change all occurrences of "in sRGB"
inside color-mix(...) to "in srgb" (apply to the shown block and the other
reported locations) so value-keyword-case passes; run gulp lint to verify.
In `@src/css/nav.css`:
- Around line 329-342: Rename the keyframes and their animation references from
camelCase to kebab-case to satisfy stylelint: change `@keyframes` versionMenuIn
and `@keyframes` statusPulse to `@keyframes` version-menu-in and `@keyframes`
status-pulse, and update every corresponding animation: versionMenuIn ... and
animation: statusPulse ... usages to animation: version-menu-in ... and
animation: status-pulse ... (also apply the same changes in the other occurrence
around lines 721-755).
In `@src/css/toc.css`:
- Line 245: The CSS uses the deprecated property word-wrap: break-word; —
replace that declaration with the modern equivalent overflow-wrap: break-word;
(remove or replace the word-wrap line in src/css/toc.css so the selector that
currently contains "word-wrap" instead uses "overflow-wrap: break-word;") to
clear the Stylelint failure.
In `@src/css/typeface-inter.css`:
- Line 8: The six `@font-face` blocks in src/css/typeface-inter.css use quoted
font-family values (e.g., font-family: "Inter") which triggers stylelint errors;
update each `@font-face` block to use an unquoted identifier (font-family: Inter)
for all occurrences in the file (the font-family declarations inside the
`@font-face` rules at the six blocks) so gulp lint passes.
In `@src/helpers/is-byoc-feature.js`:
- Line 20: The BYOC detection uses the wrong page attribute key; update the
check in the urlCache.set call (currently using the expression
urlCache.set(p.pub.url, !!p.asciidoc?.attributes?.['page-byoc'])) to use the
documented attribute 'page-byoc-only' instead so BYOC-only pages are detected
(i.e., replace 'page-byoc' with 'page-byoc-only' in that expression).
In `@src/js/react/AskAI.jsx`:
- Around line 49-59: The code currently calls createRoot(...).render(<App />)
for both element queries (homeEl and panelEl), which can mount two App instances
if both `#kapa-chat-root` and `#chat-panel-kapa-root` exist; change the logic to
mount to exactly one target by selecting a single element (for example prefer
panelEl over homeEl or use the first non-null) and only call
createRoot(...).render(<App />) once — update the block that references homeEl,
panelEl, createRoot, and App to use an if/else (or a single chosenEl variable)
so only one App is rendered.
In `@src/partials/bloblang-playground.hbs`:
- Around line 1643-1648: The "Ask AI" button still appears when
window.openChatWithQuery isn't available — instead of merely console.warn-ing in
the click handlers (the block that checks typeof window.openChatWithQuery ===
'function'), proactively disable or hide the CTA at render/time and update the
two click-handler locations to not show a non-functional button; specifically,
check typeof window.openChatWithQuery !== 'function' early and either add a
disabled attribute/class and aria-disabled to the Ask AI button (querySelector
for the button element or template variable controlling visibility) or call the
previous modal fallback if you want to preserve behavior; apply this change to
both places where window.openChatWithQuery is checked so the button is never
visible/active when the chat API is absent.
In `@src/partials/head-scripts.hbs`:
- Around line 23-28: The JS sets CSS variable --announcement-bar-height to
'50px' for mobile when announcementType !== 'bloblang' but the CSS for
.announcement-bar.is-active uses max-height: 60px, causing a 10px mismatch and
potential layout shift; fix by making the reserved height match the actual
animated max height — either change the JS assignment for mobile in the if block
where announcementType is checked (the code that sets --announcement-bar-height
and --announcement-bar-height--desktop) to '60px', or change the CSS max-height
in the announcement banner stylesheet (.announcement-bar.is-active) from 60px to
50px so both values are identical.
In `@src/partials/nav-explore.hbs`:
- Around line 6-17: The version selector is currently rendered as non-focusable
spans (container with class "container" and the span "current-version" plus the
material-symbols icon), which prevents keyboard users from opening the versions
menu; replace the clickable trigger (the span.current-version and the adjacent
material icon) with a real <button> element that is focusable and toggles an
aria-expanded attribute and references the menu via aria-controls, ensure the
button keeps the existing classes/markup semantics (e.g., "current-version"
styling) and that the dropdown container retains the "has-dropdown" behavior,
and update any JS that toggles the menu to read/write aria-expanded on that
button and to open/close the element with the matching id used by aria-controls.
In `@src/partials/nav.hbs`:
- Around line 22-28: Replace the non-semantic div used as the search trigger
with a native button element: change the element with class "sb-search" and
data-action="open-search" from <div> to <button type="button">, remove the
redundant tabindex and role attributes, keep the aria-label="Search docs" and
the inner SVG and span.sb-search-text intact, and ensure any JS that queries
".sb-search" still works (or update selectors to target the button) so keyboard
activation and accessibility work correctly.
---
Outside diff comments:
In `@src/partials/article.hbs`:
- Around line 95-220: The handler uses an undefined metadataContainer and calls
querySelector on navMetadataContainer without null checks, causing runtime
failures; define and assign metadataContainer at the top of the DOMContentLoaded
block (e.g., const metadataContainer = document.querySelector(".metadata") or
the actual selector used elsewhere), guard uses of navMetadataContainer (and
metadataContainer) before calling .querySelector or accessing properties (wrap
tippy initializations for topByocBadge/topCloudBadge and nav*Badge
initializations in if (metadataContainer) / if (navMetadataContainer) checks),
and only call observer.observe(metadataContainer) when metadataContainer is
non-null to avoid errors. Ensure you update references to
topByocBadge/topCloudBadge to query from metadataContainer only after that null
check.
In `@src/partials/nav-explore.hbs`:
- Around line 16-33: The dropdown shows a chevron but no items because the inner
guard "{{`#if` (ne page.componentVersion.displayVersion 'default')}}" prevents
rendering when the current displayVersion is 'default'; remove that guard (or
change the logic to always iterate page.versions) so the template always runs
the "{{`#each` page.versions}}" block and emits version links (still skipping the
current version via "{{`#if` (ne ./version `@root.page.version`)}}" and using
"{{`#with` (resolve-resource ./url) as |targetPage|}}", the "{{{relativize
../url}}}" href, and the existing "{{../displayVersion}}"/"{{`#if` (is-eol
../asciidoc.attributes)}}" handling).
---
Nitpick comments:
In `@src/partials/head-scripts.hbs`:
- Around line 117-128: Extract the duplicated toggle logic into a reusable
function (e.g., toggleTheme) and call it from both the sidebar handler and the
main theme handler: move the code that reads data-theme from
document.documentElement, computes newTheme, sets localStorage('theme'), and
calls setTheme into a single function (referencing setTheme and the new
toggleTheme helper), then replace the inline click callbacks on the
sidebarThemeToggle element and the main theme toggle element to just call
toggleTheme; keep the DOMContentLoaded listener but update it to attach the
click handlers to their elements (sidebar-theme-toggle and the main toggle)
which both invoke toggleTheme.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0ae3d5c1-a924-44aa-96d1-a2cc63b9835e
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (51)
gulp.d/tasks/build.jspreview-src/ui-model.ymlsrc/css/announcement-banner.csssrc/css/bloblang-playground.csssrc/css/body.csssrc/css/breadcrumbs.csssrc/css/dark-mode.csssrc/css/doc.csssrc/css/footer.csssrc/css/header.csssrc/css/home.csssrc/css/main.csssrc/css/markdown-dropdown.csssrc/css/nav.csssrc/css/pagination.csssrc/css/search-bump.csssrc/css/search.csssrc/css/site.csssrc/css/toc.csssrc/css/toolbar.csssrc/css/typeface-inter.csssrc/css/vars.csssrc/helpers/is-byoc-feature.jssrc/helpers/is-cloud-feature.jssrc/helpers/is-eol.jssrc/helpers/resolve-resource.jssrc/js/01-nav.jssrc/js/06-copy-to-clipboard.jssrc/js/11-editable-placeholders.jssrc/js/14-markdown-dropdown.jssrc/js/react/AskAI.jsxsrc/js/react/components/ChatInterface.jsxsrc/layouts/default.hbssrc/layouts/index.hbssrc/layouts/lab.hbssrc/layouts/labs-search.hbssrc/layouts/search.hbssrc/partials/algolia-script.hbssrc/partials/article.hbssrc/partials/bloblang-playground.hbssrc/partials/body.hbssrc/partials/breadcrumbs.hbssrc/partials/footer.hbssrc/partials/head-scripts.hbssrc/partials/head-styles.hbssrc/partials/header-content.hbssrc/partials/home.hbssrc/partials/nav-explore.hbssrc/partials/nav-menu.hbssrc/partials/nav.hbssrc/partials/toc.hbs
✅ Files skipped from review due to trivial changes (5)
- src/partials/footer.hbs
- src/partials/head-styles.hbs
- src/layouts/search.hbs
- src/css/dark-mode.css
- src/css/site.css
Major UI updates for hierarchical navigation system: Navigation System: - Add unified navigation with bucket structure (Self-Managed → Streaming/Connect) - New bucket-header.hbs partial with icons, titles, and per-bucket version selectors - nav-bucket.js for expand/collapse and version selector interactions - Bucket theming with custom CSS properties for colors Layouts & Templates: - component-home-v3.hbs layout for new landing page design - data-platform.hbs layout for umbrella pages - labs-home.hbs layout for labs directory - Updated article.hbs to move page options to sticky header eyebrow - Updated nav-menu-scroll.hbs for unified navigation rendering Styling: - chat-panel.css for Ask AI sidebar - component-home-v3.css for new landing page layouts - data-platform.css for umbrella page styling - labs-home.css for labs directory - product-switcher.css for top-level destination switcher - Updated nav.css with bucket theming - Updated markdown-dropdown.css for eyebrow positioning - Inter Display font for landing pages Components: - product-switcher.hbs partial for three-destination switcher - version-selector.hbs partial for per-bucket version dropdowns - chat-panel.hbs with correct sparkle icon - status-footer.hbs for version status information Helpers: - get-component-color.js, get-header-color.js, get-header-data.js - get-component-header-data.js, get-home-navigation.js - format-release-date.js, support-end-date.js, version-status.js - Utility helpers: gte.js, lt.js, split.js, subtract.js JavaScript: - 19-chat-panel.js for Ask AI interactions - 20-product-switcher.js for destination switching - 21-breadcrumb-collapse.js for responsive breadcrumbs - 22-version-selector.js for version dropdown - 23-nav-bucket.js for bucket interactions - Updated 14-markdown-dropdown.js to remove positioning logic Fixes: - Page options font consistency (11px, 600 weight) - Focus outline visibility with proper padding - Dropdown menu alignment - Icon consistency (Connect plug-connected, Ask AI sparkle) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Contributor
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
- Added --topbar-bg to existing html[data-theme=dark] block - Added --topbar-bg to existing html:not([data-theme=dark]) block - Removed duplicate theme selector blocks that caused lint error - Keeps topbar solid background for both light and dark modes
- Delete metadata-improved.css (never imported or used) - Delete METADATA-UX-PROPOSAL.md (outdated proposal document) These files were created as part of a UX exploration but were never integrated into the actual implementation.
CSS fixes: - Remove overflow:hidden from Ace editor containers to prevent scrollbar clipping - Replace deprecated word-break:break-word with overflow-wrap:anywhere - Replace deprecated clip with modern clip-path - Rename camelCase keyframes to kebab-case (toastSlideIn→toast-slide-in, etc) JavaScript fixes: - Fix timezone handling in format-release-date (use UTC accessors) - Update outdated comment referencing ROOT component - Remove duplicate excludedRoles array in has-markdown - Fix metadata persistence in Bloblang mini-playground - Fix WASM initialization state cleanup on errors - Hide all matching Ask AI buttons, not just first - Use non-interactive span for breadcrumb fallbacks - Move global event listeners outside forEach to avoid duplicates - Update Ace editor minLines default from 4 to 5 - Add hyphenated YAML key support in Connect indicators All changes validated with gulp lint and test:quick.
The topbar was using translucent backgrounds (8% opacity with transparent), making it see-through. Changed to solid backgrounds using component colors: - Light mode: color-mix(component 8%, white) - solid light tint - Dark mode: color-mix(component 30%, #0f172a) - solid dark tint Changes: - src/partials/head-component-color.hbs: Changed from 'transparent' to solid backgrounds - src/css/vars.css: Added solid topbar-bg for all 4 component-specific body selectors This maintains the component color theming while ensuring the topbar is opaque.
Add overflow: hidden to .editor-section-collapsible to clip content to border-radius. This prevents child editors from bleeding outside the rounded 8px corners of the container. The overflow: hidden here only clips visual overflow to the border-radius. The .editor elements inside have their own overflow: auto for scrollbars.
The toolbar (containing the nav-toggle button for mobile navigation) was being excluded on pages with role="home", making the navigation menu inaccessible on mobile devices. Changes: - Remove conditional that excluded toolbar on home pages - Mobile users can now access the navigation menu on all pages Testing: - Verified nav-toggle button appears on home page in mobile viewport - Confirmed navigation menu opens correctly when clicked - All lint checks pass Fixes mobile navigation accessibility issue. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit implements two major features for the home page: 1. NEW Badge System: - Add is-new-resource.js helper to check if pages have page-new attribute - Display green "NEW" badges on home page cards when linked pages are new - Works with home page product cards and intent cards - Badge styles match existing pattern from component-home-v3 2. Interim Home Page (Pre-ADP Launch): - Add has-component.js helper for automatic component detection - Wrap ADP intent card and products section in conditionals - ADP cards automatically hide when component doesn't exist - ADP cards automatically show when component exists - Restructure Cloud card with nested sub-cards (Streaming, Connect, SQL) - Cloud structure now mirrors Self-Managed with parent-child pattern - SQL sub-card displays NEW badge when page has page-new attribute 3. Bug Fix: - Fix resolve-resource.js to handle undefined resources gracefully - Prevent "Cannot read properties of undefined" errors in templates Files Changed: - src/helpers/is-new-resource.js (NEW): Check for page-new attribute - src/helpers/has-component.js (NEW): Detect component existence - src/helpers/resolve-resource.js: Add undefined safety check - src/css/home.css: Add NEW badge styles - src/partials/home.hbs: Add conditionals, restructure Cloud card - preview-src/home.adoc: Add Cloud sub-product attributes for testing All changes preserve existing code for future ADP release. The conditional logic ensures zero manual configuration - components show/hide automatically based on their existence in the site model. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes: - Add Ask AI search input to data-platform hero with suggestion chips - Add NEW badge support for Cloud BYOC SQL stat - Fix is-new-resource helper to check all components (not just current) - Fix overflow menu showing on desktop (add !important to display: none) - Add Ask AI form handler JavaScript to data-platform template This is the interim home page solution until ADP launches, highlighting Redpanda SQL in Cloud BYOC with the NEW badge. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add whats-new.css import to site.css (was missing, causing no styling) - Fix aggregate-whats-new helper to get contentCatalog from options.data.root - Update cloud-docs link to use full component prefix for proper resolution - Add conditional layout class for What's New section - Support both light and dark modes with proper CSS variables
- Add whats-new section to component-home-v3 template using get-whats-new-items helper - Add CSS styling for ch3-whats-new-wrapper with proper width and spacing - Section displays after hero and before tabs - Ready for content team to add component-whats-new attributes to pages
- Fix nav-menu.hbs to use correct attributes (has-custom-nav, custom-navigation) - Add logic to nav-menu-scroll.hbs to show home component's own navigation - Create get-component-navigation helper to retrieve component navigation - Mobile dropdown positioning fix for version selector - Remove 'Home' from breadcrumbs hierarchy - Skip pagination for home page - Revert Cloud section to simple single card structure
- Add sparkles icon to bucket-header.hbs for ADP navigation - Clean up debug comments from nav-menu-scroll.hbs - Update test-home-component helper to check contentCatalog
Makes hero sections consistent across all component landing pages (streaming, cloud, connect, self-managed) by increasing from 720px to 1100px.
Critical Fixes: - Fix undefined metadataContainer causing IntersectionObserver error in article.hbs - Fix empty version dropdown for pages with "default" version in nav-explore.hbs - Remove console.log debug statements from navigation helpers Landing Page Enhancements: - Make all landing page sections span full-width (remove max-width constraints) - Apply consistent layout across data-platform and component-home-v3 pages - Sections now extend edge-to-edge with padding, matching hero behavior - Updated: .dp-section, .ch3-section, .ch3-tabs, .ch3-hero-columns Ask AI Integration: - Add Ask AI search bar to all component-home-v3 hero sections - Add component-specific AI suggestion questions via get-ai-suggestions.js helper - Suggestions configurable per component via antora.yml attributes (ai-suggestion-1 through ai-suggestion-4) - Show Ask AI button on home page (previously hidden) - Full styling matching data-platform design with sparkle icon CSS Improvements: - Add empty line before custom properties for stylelint compliance - Consistent gutter and max-width variables across landing pages Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix issue where labs section title appears on landing pages even when no actual lab items (labs-1-title through labs-4-title) are provided. Now only renders labs section if both title and at least one lab exist. Fixes empty labs sections on streaming and connect landing pages.
- Fix HTML entities in AI suggestion questions (use triple braces) - Fix bold text not appearing bold (use proper font-weight) Fixes: 1. AI suggestions showed ' instead of apostrophes 2. Bold markup (strong, b) rendered with lighter weight instead of bold Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Makes home page layout consistent with other landing pages by removing max-width constraints from: - .home-hero-inner (was 1100px) - .home-intent-container (was 900px) - .home-products-container (was 900px) - .home-paths-container (was 1000px) - .home-nav-container (was 1200px) Now uses full-width layout with gutter padding like data-platform and component-home-v3 pages. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Updated the page options 'Ask AI about this topic' button to: - Open the new chat drawer instead of the old Kapa modal - Pre-fill the chat input with context about the current page - Focus the input field after opening This makes the page options button consistent with the new Ask AI drawer implementation. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove !important from default hide rule to allow mobile override - Add !important to mobile show rule for proper specificity - Add tb-dropdown-trigger class to overflow button for JavaScript handler - Fixes Labs and Ask a Human links not being accessible on mobile
- Add mobile breakpoint to prevent version dropdown from extending beyond viewport - Set max-width to account for nav padding and prevent cutoff on left side - Fixes version dropdown being cut off on streaming pages on mobile
- Add mobile breakpoint to reset .breadcrumbs .sm-ver-panel positioning - Allows component-home-v3 mobile centering styles to work correctly - Version dropdown now centered and visible on screens <= 640px
- Add mobile breakpoints for .component-indicator-sticky .sm-ver-panel - Add mobile breakpoints for .breadcrumbs .sm-ver-panel - Use position: fixed with top: 50%, left: 50% for mobile centering - Use !important to override default positioning rules
The root cause was that .doc article has 'contain: layout style paint' which creates a containing block for position:fixed elements, making them position relative to the article instead of the viewport. Solution: - Remove containment from .doc when version selector is open on mobile - Add transform: translate(-50%, -50%) for proper centering - Apply fixes to both .component-indicator-sticky and .breadcrumbs contexts The dropdown is now: - Centered on screen (top: 50%, left: 50%) - Fully visible in viewport - Easy to close by clicking backdrop
CSS changes: - Add !important to text-decoration: none on .sm-ver-row - Add !important to text-decoration: none on .sm-ver-foot-link JavaScript changes: - Update close handler to check panel.contains() instead of smVer.contains() - Add touchstart event handler for mobile support - Prevent closing when clicking on panel content itself Now clicking outside the panel properly closes it on mobile
- Standardized section spacing: reduced home-products top padding from 80px to 56px, increased home-intent bottom padding from 48px to 56px for consistent 112px total - Increased font sizes for better readability: - Intent card titles: 17px -> 19px - Intent card descriptions: 14px -> 15px - Product card titles: 14px -> 15px - Product card descriptions: 12px -> 13px - Product card links: 12px -> 13px - Removed excessive empty space by eliminating padding-bottom from product grids - Added footer to component-home-v3 landing pages (cloud, self-managed, streaming, connect) Fixes spacing inconsistencies, improves text readability, and ensures all landing pages have proper footers.
- Changed layout from separate ADP/Data Platform sections to two-column main cards - ADP card: Full clickable link to /agentic-data-plane/ - Data Platform card: Contains nested product cards (Cloud, Self-Managed) - Cloud: Clickable link to cloud-data-platform/home - Self-Managed: Contains sub-cards for Streaming and Connect - All cards and nested cards are now clickable links - Added arrow icons to indicate clickability - Responsive design: stacks to single column on mobile Improves navigation by making the entire product structure more hierarchical and clickable.
- Added lead-in descriptions to both ADP and Data Platform main cards - ADP card enhancements: - Added description: 'Multi-agent infrastructure' - Added animated GIF showing agent workflow (YOUR DATA -> AGENT -> ACTION) - Added quick links: 'Get started' and 'Documentation' buttons with icons - Changed from full card link to header link to accommodate internal content - Data Platform card enhancement: - Added description: 'High-performance streaming data platform for mission-critical workloads' - Header remains clickable - Fixed background color inconsistency: changed products section from var(--body-background) to var(--home-background) to match rest of page - Added CSS for visual container, quick links with hover effects - ADP card now has more content and visual interest Addresses feedback about empty ADP card and white background inconsistency.
- Copied adp-infographic.gif from Downloads to home/modules/ROOT/images/ - Updated home.hbs to reference ./_images/adp-infographic.gif - New GIF shows clearer agent workflow: YOUR DATA -> AGENT -> ACTION - Includes 'GOVERNED END-TO-END · POLICY · AUDIT' messaging - Fixed image path resolution to work correctly with Antora The new infographic provides better visual representation of the Agentic Data Plane workflow.
- Changed padding-left from 0 to 16px for .prev button - Changed padding-right from 0 to 16px for .next button - Text no longer sits flush against the border - Provides better visual balance in the pagination cells Fixes issue where PREV and NEXT text appeared scrunched up against the borders despite having large empty cells.
- Converted 358+ hardcoded pixel font sizes to rem-based calculations - Increased all font sizes by 1-2px for improved readability - Pattern: font-size: calc(px / var(--rem-base) * 1rem) - Files affected: all CSS, templates, and helper files - Sizes 10px and below increased by 2px - Sizes 11px and above increased by 1px This ensures consistent font scaling across all breakpoints and improves accessibility while maintaining design proportions. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements unified navigation system for Redpanda documentation with Data Platform hierarchy, component-themed navigation buckets, and enhanced user experience features.
Overview
This PR introduces a complete redesign of the documentation navigation to support a unified sidebar for Data Platform that combines Streaming and Connect navigation in a single, collapsible bucket structure. The implementation includes 77 files with 9,046 additions across templates, styles, and JavaScript.
Major Features
1. Unified Navigation System
New files:
src/partials/bucket-header.hbs- Bucket header with icon, title, version selectorsrc/partials/nav-menu-scroll.hbs- Unified navigation rendering logicsrc/js/23-nav-bucket.js- Bucket expand/collapse and version selector interactionssrc/css/nav.css- Updated with bucket theming styles2. Product Switcher
New files:
src/partials/product-switcher.hbs- Product switching UIsrc/js/20-product-switcher.js- Dropdown interactionssrc/css/product-switcher.css- Product switcher styling3. Version Selector
New files:
src/partials/version-selector.hbs- Version selector UIsrc/js/22-version-selector.js- Version selector logicsrc/css/version-selector.css- Version selector styling4. Component Home Pages (v3 Layout)
New files:
src/layouts/component-home-v3.hbs- New home page layoutsrc/partials/component-home-v3.hbs- Component home partialsrc/css/component-home-v3.css- Component home styling5. Data Platform Landing Page
New files:
src/layouts/data-platform.hbs- Data Platform layoutsrc/partials/data-platform.hbs- Data Platform content partialsrc/css/data-platform.css- Data Platform page styling6. Labs Home Page
New files:
src/layouts/labs-home.hbs- Labs landing page layoutsrc/css/labs-home.css- Labs home styling7. Ask AI Chat Panel
New files:
src/partials/chat-panel.hbs- Chat panel structuresrc/js/19-chat-panel.js- Chat panel interactionssrc/js/react/AskAI.jsx- React chat interface (updated)src/css/chat-panel.css- Chat panel styling8. Enhanced Header Features
New files:
src/js/21-breadcrumb-collapse.js- Breadcrumb collapse logicsrc/css/markdown-dropdown.css- Page options dropdown styling (updated)9. Typography Improvements
New files:
src/css/typeface-inter-display.css- Inter Display font definitionssrc/font/inter-display/- Inter Display font files (24 .ttf files)Design System
Component Colors
Each component has a defined color used across the UI:
#4b44ff(purple) - Umbrella component#107569(teal) - Self-Managed docs#54478C(purple) - Connect docs#0ea5e9(blue) - Cloud docs#e24328(orange) - ADP docsDark Mode
All new features include full dark mode support with appropriate contrast adjustments.
Accessibility
Updated Files
Templates
src/partials/header-content.hbs- Updated header structuresrc/partials/nav.hbs- Updated for unified navigationsrc/partials/home.hbs- Updated home page linksHelpers
src/helpers/get-component-color.js- Component color lookupsrc/helpers/get-header-data.js- Header data extractionsrc/helpers/get-component-header-data.js- Component-specific header datasrc/helpers/get-page-info.js- Updated page info extractionsrc/helpers/add-suggested-labs.js- Updated component referencessrc/helpers/list-related-labs.js- Updated component referencesStyles
src/css/doc.css- Article page improvementssrc/css/home.css- Home page styling updatessrc/css/nav.css- Unified navigation bucket stylessrc/css/vars.css- New component color variablesScripts
src/js/06-copy-to-clipboard.js- Updated for new layoutssrc/js/16-bloblang-interactive.js- Updated for chat panelBreaking Changes
Component Renames (Anticipated)
This UI is designed to work with renamed components:
ROOT→streamingredpanda-cloud→cloud-data-platformredpanda-connect→connectredpanda-labs→labsThe UI bundle includes fallback logic to handle both old and new component names during transition.
Related PRs
Antora Extension
Content Repository Updates
docs-site Playbook
Playbook updates needed to:
Testing
Local Testing
Test Scenarios
Deployment Notes
This UI bundle is compatible with existing Antora content but requires:
page-header-dataattributes (section, color, order, icon)The bundle can be deployed independently for visual testing before content/extension PRs are merged.